[00:00] SVGs are made up of several paths and coloring an individual path is fairly straightforward. However, if we want to color the entire image setting up bindings on each of these paths could end up being pretty time-consuming. In this lesson, I'll demonstrate an alternative method that we can refer to as tinting the SVG. I'll start with an SVG of a motor that I've pulled in from the symbol Factory, but you can do this with any SVG you might be using in your project. Instead of drilling into the paths, I'm going to select my entire SVG and then I'm going to duplicate it. If I drag it to the side, you can see that there are in fact two Motors. I'll put this back on top of the other one because we'll need them to be directly on top of each other to proceed. The next thing I'll do is flatten the top SVG and I'll do that by going to the menu bar expanding Shape and I can click Union. Now I'm left with a flattened outline of the motor SVG with the original still underneath. I'm going to remove the outline by going to the property editor finding the Stroke Paint property and I'll click the pen icon.

[01:06] I'll click the first square here from the top which sets No Paint on the outline. Now I can set up a tag binding on the Fill Paint property. I'll click The binding icon select my OPC tag, and now I'm ready to set up the colors. I'll make it so that when the value is zero the color is red. I'll pick my color but then I'll click the paint can which will open up the color wheel this bar with the a next to it is the alpha value and allows me to change the transparency. I'll set this to 35 and we can see the fill color is now semi-transparent. I'll repeat this process with tag values of 1 and 2 a value of 1 will show the color green and I'll change the transparency. For value of 2 the color will be yellow and it'll blink orange and I'll change the transparency for both those colors as well. Now the top motor SVG acts as a sort of tint that I can place on top of the previous motor to change the color of the entire thing.

[02:10] I'll change the value of my tag and you can see the color changing. One useful tip is to select your tint and your base SVG and right-click and group them together. Now you can move both of them together as one whole piece. As you can see creating an SVG tint is a nice way to color an entire SVG without having to create bindings on the fill paint properties for each path.